<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--  react核心库  -->
  <script src="lib/react.development.js"></script>
  <!--  reactdom:操作DOM  -->
  <script src="lib/react-dom.development.js"></script>
  <script src="lib/babel.min.js"></script>
</head>
<body>
<!--指定挂载的位置-->
<div id="root"></div>
</body>
<script type="text/babel">
  // 创建一个React容器
  const root = ReactDOM.createRoot(document.querySelector("#root"));
  {
      // 1
      // class App extends React.Component{
      //     bookInfo = {
      //         wuxia:{
      //             typeName:"武侠",
      //             bookList:[
      //                 {
      //                     bookName:"天龙八部",
      //                     author:"金庸"
      //                 },{
      //                     bookName: "水浒传",
      //                     author:"施耐庵"
      //                 }
      //             ]
      //         },
      //         xuanhuan:{
      //             typeName:"玄幻",
      //             bookList: [
      //                 {
      //                     bookName:"霸道总裁爱上我",
      //                     author:"愤怒的香蕉"
      //                 },{
      //                     bookName: "庆余年",
      //                     author: "猫腻"
      //                 }
      //             ]
      //         }
      //     }
      //     render(){
      //         return (
      //             <>
      //                 <div>
      //                     <h3>{this.bookInfo.wuxia.typeName}</h3>
      //                     {
      //                         this.bookInfo.wuxia.bookList.map((item,index)=>(
      //                             <p key={index}>作者：{item.author},作品：《{item.bookName}》</p>
      //                         ))
      //                     }
      //                 </div>
      //                 <hr/>
      //                 <div>
      //                     <h3>{this.bookInfo.xuanhuan.typeName}</h3>
      //                     {
      //                         this.bookInfo.xuanhuan.bookList.map((item,index)=>(
      //                             <p key={index}>作者：{item.author},作品：《{item.bookName}》</p>
      //                         ))
      //                     }
      //                 </div>
      //             </>
      //         )
      //     }
      // }
      // root.render(<App/>)
  }
  {
      // 2- 使用解构赋值
      // class App extends React.Component{
      //     bookInfo = {
      //         wuxia:{
      //             typeName:"武侠",
      //             bookList:[
      //                 {
      //                     bookName:"天龙八部",
      //                     author:"金庸"
      //                 },{
      //                     bookName: "水浒传",
      //                     author:"施耐庵"
      //                 }
      //             ]
      //         },
      //         xuanhuan:{
      //             typeName:"玄幻",
      //             bookList: [
      //                 {
      //                     bookName:"霸道总裁爱上我",
      //                     author:"愤怒的香蕉"
      //                 },{
      //                     bookName: "庆余年",
      //                     author: "猫腻"
      //                 }
      //             ]
      //         }
      //     }
      //     render(){
      //         const {wuxia,xuanhuan} = this.bookInfo;
      //         return (
      //             <>
      //                 <div>
      //                     <h3>{wuxia.typeName}</h3>
      //                     {
      //                         wuxia.bookList.map((item,index)=>(
      //                             <p key={index}>作者：{item.author},作品：《{item.bookName}》</p>
      //                         ))
      //                     }
      //                 </div>
      //                 <hr/>
      //                 <div>
      //                     <h3>{xuanhuan.typeName}</h3>
      //                     {
      //                         xuanhuan.bookList.map((item,index)=>(
      //                             <p key={index}>作者：{item.author},作品：《{item.bookName}》</p>
      //                         ))
      //                     }
      //                 </div>
      //             </>
      //         )
      //     }
      // }
      // root.render(<App/>)
  }
  {
      // 3
      class App extends React.Component{
          bookInfo = {
              wuxia:{
                  typeName:"武侠",
                  bookList:[
                      {
                          bookName:"天龙八部",
                          author:"金庸"
                      },{
                          bookName: "水浒传",
                          author:"施耐庵"
                      }
                  ]
              },
              xuanhuan:{
                  typeName:"玄幻",
                  bookList: [
                      {
                          bookName:"霸道总裁爱上我",
                          author:"愤怒的香蕉"
                      },{
                          bookName: "庆余年",
                          author: "猫腻"
                      }
                  ]
              }
          }
          render(){
              const {wuxia,xuanhuan} = this.bookInfo;
              return (
                  <>
                      <Book bookInfo={wuxia}></Book>
                      <hr/>
                      <Book bookInfo={xuanhuan}></Book>
                  </>
              )
          }
      }
      class Book extends React.Component{
          render(){
              // console.log(this.props.bookInfo);
              const {typeName,bookList} = this.props.bookInfo;
              return (
                  <div>
                      <h3>{typeName}</h3>
                      {
                          bookList.map((item,index)=>(
                              <p key={index}>作者：{item.author}--《{item.bookName}》</p>
                          ))
                      }
                  </div>
              )
          }
      }
      root.render(<App/>)
  }
</script>
</html>